<!--
 * @Author: 王灿
 * @Date: 2019-11-25 21:21:20
 * @LastEditTime: 2019-11-25 20:41:11
 * @Description: 日期时间选择器
 * @FilePath: \scarlet-sparrow-admin\src\components\jq-time\index.vue
 -->

<template>
  <el-date-picker
    class="jq-time"
    v-model="value"
    type="datetimerange"
    :picker-options="pickerOptions"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    align="right"
  ></el-date-picker>
</template>

<script>
export default {
  name: 'JqTime',
  props: {
    // 默认数据
    defaultValue: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      value: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  watch: {
    // 监听时间改变
    value() {
      this.$emit('onGetTime', this.value)
    },
    // 默认时间
    defaultValue(val) {
      this.value = this.defaultValue
    }
  },
  created() {
    this.value = this.defaultValue
  }
}
</script>

<style lang="scss">
.jq-time {
  &.el-date-editor--datetimerange {
    width: 100% !important;
    .el-icon-time,
    .el-input__icon,
    .el-range-separator {
      display: flex !important;
      align-items: center !important;
    }
  }
}
</style>